<template>
    <view>
        <custom><template #backText>推广奖励</template></custom>
        <nFormItem key="form_my_promote_amount" title="当前推广奖励数量" title_em="8" text_lr="right" :value="$store.state.user.user_asset_info.promote_amount | floor"></nFormItem>
        <nFormItem key="form_promote_amount" title="要兑换的数量" title_em="6" format="number" :data.sync="data" field="promote_amount"></nFormItem>
        <nFormItem key="form_asset_type" type="radio" title="要兑换的类型" title_em="6" :data.sync="data" field="asset_type"
            :radio_values="{'gold_coupon': '金券', 'balance': '提现红包'}"></nFormItem>
        <template v-if="data.form.asset_type == 'gold_coupon'">
            <nFormItem key="form_my_gold_coupon_amount" title="当前金券数量" text_lr="right" :value="$store.state.user.user_asset_info.gold_coupon_amount | floor"></nFormItem>
        </template>
        <template v-if="data.form.asset_type == 'balance'">
            <nFormItem key="form_my_balance_amount" title="当前提现红包数量" text_lr="right" :value="$store.state.user.user_asset_info.balance_amount | floor"></nFormItem>
            <nFormItem key="form_balanceTakeAmount" v-if="balanceTakeAmount" title="手续费" :value="balanceTakeAmount"></nFormItem>
            <nFormItem key="form_balanceTakeAmount_sub_promote_amount" v-if="balanceTakeAmount" title="到账提现红包" :value="data.form.promote_amount | bc('sub', balanceTakeAmount)"></nFormItem>
        </template>
        <nFormButton title="兑 换" :tap="submit"></nFormButton>
        <nBar title="相关日志" right_title="查看全部日志" right_uri="/user/asset/log"></nBar>
        <userAssetLogTimeline ref="userAssetLogTimeline" :parentForm="userAssetLog.form"></userAssetLogTimeline>
    </view>
</template>

<script>
    import userAssetLogTimeline from '@/components/nddyny/userAssetLogTimeline.vue';

    export default {
        components: {
            userAssetLogTimeline,
        },
        data() {
            let form = {
                promote_amount: '',
                asset_type: ''
            }
            return {
                balance_take_ratio: null,
                data: {
                    formtag: {},
                    form: this.$nddyny.object.copy(form),
                    formbak: this.$nddyny.object.copy(form),
                },
                userAssetLog: {
                    form: {
                        action_types: '80,81'
                    },
                },
            }
        },
        watch: {
            'data.form.asset_type'() {
                if (this.data.form.asset_type == 'balance' && !this.balance_take_ratio) {
                    this.$api.config(this, '用户.推广奖励兑换提现红包.手续费比例', (config) => {
                        this.balance_take_ratio = config['用户.推广奖励兑换提现红包.手续费比例'];
                    })
                }
            }
        },
        computed: {
            balanceTakeAmount() {
                if (!this.data.form.promote_amount || !this.balance_take_ratio) {
                    return 0;
                }
                return this.$nddyny.bc.mul(this.data.form.promote_amount, this.$nddyny.bc.div(this.balance_take_ratio,
                    100));
            }
        },
        methods: {
            submit() {
                this.$api.post(this, {
                    loading: '兑换推广奖励中',
                    url: '/user/asset/promote2Asset',
                    success: (Result) => {
                        if (this.$api.form.toast(this, Result)) return;
                        this.$user.updateUserAssetInfo(this);
                        this.data.form = this.$nddyny.object.copy(this.data.formbak);
                        this.$refs.userAssetLogTimeline.getList(this.$api.list_action_force_init);
                        this.$store.commit('userToastSuccess', '兑换奖励成功');
                    }
                });
            }
        }
    }
</script>
